<template>
    <div class="content">
        <a-card class="card">
            <div v-if="!status">
                <a-empty :image="simpleImage" description="暂无店铺，请商家先添加店铺" />
                <a-button type="primary" @click="showAddModal">新增店铺</a-button>
            </div>
            <div v-if="status" class="card_content">
                <div class="avatar">
                    <a-card title="关于" style="width: 100%">
                        <template #extra><a @click="editInfo" style="text-align: left">修改信息</a></template>
                        <div class="img">
<!--                            <img src="@/assets/img/login/logo.png" alt="">-->
                            <img :src="imgUrl" alt="">
                        </div>
                    </a-card>
                </div>
                <div class="info">
                    <a-tabs v-model:activeKey="activeKey">
                        <a-tab-pane key="2" tab="账号信息">
                            <div class="list">
                                <div class="title">
                                    账号名：
                                </div>
                                <div class="list_content">
                                    {{userInfo.username}}
                                </div>
                            </div>
                            <div class="list">
                                <div class="title">
                                    绑定手机：
                                </div>
                                <div class="list_content">
                                    {{userInfo.mobile}}
                                </div>
                            </div>
                            <div class="list">
                                <div class="title">
                                    邮箱：
                                </div>
                                <div class="list_content">
                                    {{ userInfo.email }}
                                </div>
                            </div>
                            <div class="list">
                                <div class="title">
                                    密码：
                                </div>
                                <div class="list_content">
                                    <span style="font-weight: 1200">********************(已加密)</span>
                                </div>
                            </div>
                        </a-tab-pane>
                        <a-tab-pane  key="1" tab="店铺信息">
                            <div class="list">
                                <div class="title">
                                    店铺名：
<!--                                    <span style="color: #519AEE">{{shopInfo.name}}</span>-->
                                </div>
                                <div class="list_content">
                                    <span style="color: #519AEE">{{shopInfo.name}}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="title">
                                    营业时间：
                                </div>
                                <div class="list_content">
                                    {{shopInfo.beginTime}} - {{shopInfo.endTime}}
                                </div>
                            </div>
                            <div class="list">
                                <div class="title">
                                    店铺地址：
                                </div>
                                <div class="list_content">
                                    {{ shopInfo.address }}
                                </div>
                            </div>
                            <div class="list">
                                <div class="title">
                                    是否营业：
                                </div>
                                <div class="list_content">
                                    <span v-if="shopInfo.isBusiness == 0">营业</span>
                                    <span v-else>已停业</span>
                                </div>
                            </div>
                        </a-tab-pane>

                    </a-tabs>
                </div>
            </div>
        </a-card>
        <!--  新增弹框      -->
        <common-modal :data="modalData.formState" :visible="modalData.showAdd" :title="modalData.title" :typeName="modalData.typeName" @close="handleClose"></common-modal>
    </div>
</template>

<script>
import {defineComponent, onMounted,reactive, toRefs} from "vue";
import {apiGetShopInfo, apiAddShopInfo, getImgUrl} from "../../../api";
import {message, Empty} from "ant-design-vue";
import commonModal from "./components/commonModal";
import { dateFormat} from "../../../untils/date";
import moment from 'moment'
// import ModalModifyInfo from "./components/ModalModifyInfo";

export default defineComponent({
    name: "index",
    components: { commonModal},
    setup() {
        const state = reactive({
            userInfo: JSON.parse(window.localStorage.getItem('userInfo')),
            shopInfo: {},
            status: false,
            imgUrl: ''
        })
        // 对话框表单
        const modalData = reactive({
            formState: {},
            showAdd: false,
            title: "",
            typeName: ""
        })
        // 获取信息
        const getInfo = () => {
            apiGetShopInfo({}).then((res) => {
                if (res.data.code == 500) {
                    message.warning(res.data.msg)
                    state.status = false
                    return
                }
                if (res.data.code == 200) {
                    console.log(123, res)
                    if (res.data.data) {
                        state.status = true
                        state.shopInfo = res.data.data
                        // 调用获取头像接口
                        const params = {
                            filename: state.userInfo.headPic
                        }
                        getImgUrl(params).then((res) => {
                            state.imgUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
                        })
                    }
                }

            })
        }

        // 打开新增店铺弹框
        const showAddModal = () => {
            // state.addModalVisible = true
            modalData.showAdd = true
            modalData.title = "新增店铺"
            modalData.formState = {}
            modalData.typeName = "add"
        }

        // 控制对话框操作
        const handleClose = (val) => {
            if (val == 'add') {
                // 获取id
                const userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
                const temp = {
                    id: userInfo.id
                }
                const params = {...modalData.formState, ...temp}
                // 调用接口，新增菜单
                apiAddShopInfo(params).then((res) => {
                    if (res.data.code == 200) {
                        message.success('添加店铺成功')
                        state.status = true
                    }
                })

            }
            if (val == 'edit') {
                // 调用接口，编辑菜单

            }
            if (val == 'cancel') {
                // 点击取消按钮，
                // getList()
            }
            modalData.showAdd = false
        }
        const editInfo = () => {

        }

        onMounted(() => {
            getInfo()
        })
        return{
            ...toRefs(state),
            simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
            showAddModal,
            modalData,
            handleClose,
            editInfo
        }
    }
})
</script>

<style lang="less" scoped>
.content{
    //display: flex;
    //justify-content: space-between;
    width: 100%;
    height: 100%;

    .card {

        height: 100%;
        margin: 10px;
        //background: #fff;

        .card_content {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 100%;
            margin: 10px;
        }
        .avatar {
            text-align: center;
            .img {
                margin: 0 auto;
                width: 130px;
                height: 130px;
                background: #364d79;
                border-radius: 50%;

                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .info {
            width: 60%;
            height: 80%;
            //background: #f9fbfb;
            border: 1px solid #f0f0f0;

            .list {
                display: flex;
                font-weight: bold;
                height: 50px;
                line-height: 50px;
                .title {
                    width: 100px;
                }
            }
        }
    }
}

::v-deep .ant-card-body {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

::v-deep .ant-card-bordered {
    width: 100% !important;
}

::v-deep .ant-tabs-nav-scroll {
    text-align: left;
}

::v-deep .ant-card-head-title {
    text-align: left;
}
</style>
